<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="order">
        <div class="orderNav">
            <div>
                <div><span class="glyphicon glyphicon-list-alt"></span></div>
                <div>订单管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-list-alt"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    订单管理
                </div>
            </div>
        </div>
        <div class="orderData">
            <div class="selectData">
                <div class="selectPay">
                    <div>支付状态：</div>
                    <div @click="accomplishPay" :class="{payClo:isPayClo == 1}">已完成</div>
                    <div @click="waitPay" :class="{payClo:isPayClo == 0}">待支付</div>
                </div>
                <div></div>
            </div>
            <div class="details" v-loading.body="loading" element-loading-text="正在添加中...">
                <ul>
                    <li class="firstLi">
                        <div>用户昵称</div>
                        <div>套餐名称</div>
                        <div>充值金额</div>
                        <div>赠送金额</div>
                        <div>订单状态</div>
                        <div>创建时间</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>{{item.consumerEntity.nickName}}</div>
                        <div>{{item.goodsEntity.gname}}</div>
                        <div>{{item.goodsEntity.price}}</div>
                        <div>{{item.goodsEntity.presentation}}</div>
                        <div>{{item.status | strFun}}</div>
                        <div>{{item.goodsEntity.ctime | ctimeFun}}</div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'order',
        data() {
            return {
                nullShow: true,
                loading: false,
                items: [],
                pageSizeNum: 10,
                totalNum: 0,
                isPayClo: 1,
                currentPage: 1
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "  " + hour + ":" + minute;
            },
            // 图片过滤
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            },
            // 图片过滤
            strFun: function (val) {
                if (val == 0) {
                    return '未支付'
                } else {
                    return '已支付'
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')

        },
        methods: {
            // 设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.loading = true
                self.pageSizeNum = val;
                self.currentPage = 1
                self.getOrderAll({
                    status: self.isPayClo,
                    pageSize: val,
                    number: 1
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getOrderAll({
                    status: self.isPayClo,
                    pageSize: self.pageSizeNum,
                    number: val
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 搜索已完成交易
            accomplishPay() {
                this.isPayClo = 1
                // 获取所有通知 默认显示完成
                var self = this;
                self.loading = true
                self.getOrderAll({
                    status: 1,
                    pageSize: self.pageSizeNum,
                    number: self.currentPage
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 搜索待支付交易
            waitPay() {
                this.isPayClo = 0
                var self = this;
                self.loading = true
                self.getOrderAll({
                    status: 0,
                    pageSize: self.pageSizeNum,
                    number: self.currentPage
                }).then((data) => {

                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
      ...mapActions(['getOrderAll'])
        }
    }

</script>

<style scoped src="../../assets/css/order.css">

</style>